<!--  -->
<template>
  <div class="article-container">
    <el-card class="filter-card">
      <div slot="header">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 筛选表单 -->
      <el-form ref="form"
               :model="form"
               label-width="50px"
               size="small">
        <el-form-item label="状态">
          <!-- 绑定选中之后的值为status -->
          <el-radio-group v-model="status">
            <!-- el-radio默认把label作为文本和选中之后的value值 -->
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="channelId"
                     placeholder="请选择频道">
            <el-option label="全部"
                       :value="null"></el-option>
            <el-option v-for="(item,index) in channels"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="rangeDate"
                          type="datetimerange"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :default-time="['12:00:00']"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- button按钮的click事件有一个默认的参数，当你没有指定的时候，它会默认传递一个没用的数据 -->
          <el-button type="primary"
                     :disabled="loading"
                     @click="loadArticles(1)">查询</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据列表---------------- -->
    <el-card class="filter-card">
      <div slot="header"
           class="clearfix">
        <span>根据筛选条件共查询到 {{totalCount}} 条结果：</span>
      </div>
      <!-- :data绑定articles数据 -->
      <el-table :data="articles"
                size="small"
                class="list-table"
                style="width: 100%"
                v-loading="loading">
        <el-table-column label="封面"
                         width="180">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px"
                      :src="scope.row.cover.images[0]"
                      fit="cover"
                      lazy>
              <!-- 占位内容加载中 -->
              <div slot="placeholder"
                   class="image-slot">
                加载中<span class="dot">...</span>
              </div>
              <!-- 加载失败图片 -->
              <div slot="error"
                   class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <!-- 下面是vue原生写法 -->
            <!-- <img v-if="scope.row.cover.images[0]"
                 class="article-cover"
                 :src="scope.row.cover.images[0]  "
                 alt="">
            <img v-else
                 class="article-cover"
                 src="./no-cover.gif"
                 alt=""> -->
            <!-- 下面这种情况是在运行期间动态改变处理的，而本地图片必须在打包的时候就存在 -->
            <!-- <img
            class="article-cover"
            :src="scope.row.cover.images[0] || 'no-cover.gif'"
                 alt="">    错误代码 -->
          </template>
        </el-table-column>
        <el-table-column prop="title"
                         label="标题"
                         width="400">
        </el-table-column>
        <el-table-column label="状态"
                         width="180">
          <!-- prop默认展示文本 -->
          <!-- 当定义了template标签就是自定义模板，prop是渲染文本的就失效了，所以可以去掉 -->
          <!-- 如果需要获取当前遍历项数据，那么就在template上声明slot-scope="scope" -->
          <template slot-scope="scope">
            <el-tag :type="articleStatus[scope.row.status].type">{{articleStatus[scope.row.status].text}}</el-tag>
            <!-- <el-tag v-if="scope.row.status===0">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1"
                    type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2"
                    type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3"
                    type="danger">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4"
                    type="info">已删除</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column prop="pubdate"
                         label="发布时间">
        </el-table-column>
        <!-- 自定义表格列模板 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="primary"
                       circle
                       icon="el-icon-edit"
                       @click="$router.push(`/publish?id=${scope.row.id}`)"></el-button>
            <el-button size="mini"
                       type="danger"
                       circle
                       icon="el-icon-delete"
                       @click="onDeleteArticle(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <!-- 标签内没有内容时可以单标签结束 -->
      <!-- page-size设置每页条数 -->
      <el-pagination background
                     layout="prev, pager, next"
                     :total="totalCount"
                     @current-change="onCurrentChange"
                     :page-size="pageSize"
                     :disabled="loading"
                     :current-page.sync="currentPage"/>
                     <!-- current-page.sync要加上.sync修饰符否则无法绑定 -->
    </el-card>
  </div>
</template>

<script>
import { getArticle, deleteArticle } from '@/api/article'
import { channel } from '@/api/channel'
export default {
  name: 'Article',
  components: {},
  props: {},
  data () {
    return {
      form: {
        name: '',
        region: '',
        value1: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      articles: [],
      articleStatus: [
        { status: 0, text: '草稿', type: '' },
        { status: 1, text: '待审核', type: 'warning' },
        { status: 2, text: '审核通过', type: 'success' },
        { status: 3, text: '审核失败', type: 'danger' },
        { status: 4, text: '已删除', type: 'info' }
      ],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      status: null,
      channels: [],
      channelId: null,
      rangeDate: null,
      loading: true
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadArticles()
    this.loadChannel()
  },
  mounted () { },
  methods: {
    loadArticles (page = 1) { // page默认等于1
      this.loading = true
      getArticle({ // 传递对象参数
        page, // page: page,省略
        per_page: this.pageSize,
        status: this.status,
        channel_id: this.channelId,
        begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,
        end_pubdate: this.rangeDate ? this.rangeDate[1] : null
      }).then(res => {
        const { results, total_count: totalCount } = res.data.data
        this.articles = results
        this.totalCount = totalCount
        // 关闭加载中
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
    onCurrentChange (page) {
      this.loadArticles(page)
    },
    loadChannel () {
      channel().then(res => {
        // console.log(res)
        this.channels = res.data.data.channels
      })
    },
    onDeleteArticle (id) {
      this.$confirm('是否删除该文章', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArticle(id.toString()).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadArticles(this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style lang='less' scoped>
.filter-card {
  margin-bottom: 30px;
}
.list-table {
  margin-bottom: 20px;
}
.article-cover {
  width: 100px;
  background-size: cover;
}
</style>
